<template>
  <div class="chat">
    <zhHeader class="header" title="与妮可聊天中" :leftRouter="{name: back}" :rightRouter="{name: 'contract', query: this.$route.query}">
      <span slot="left">返回</span>
      <a slot="right" class="submit">确定预约</a>
    </zhHeader>
    <section class="chat-container">
      <ul class="chat-wrapper">
        <li v-for="(mes, index) in message.content" :key="index" class="item ovh">
          <img :class="{left: mes.id != id, right: mes.id == id}" :src="message.preview[mes.preview]" class="preview">
          <div :class="{left: mes.id != id, right: mes.id == id}" class="content">{{mes.message}}</div>
        </li>
      </ul>
    </section>
    <section class="control">
      <mt-field class="input"></mt-field>
      <a class="button horizontal">发送</a>
    </section>
  </div>
</template>

<script>
import zhHeader from '@/components/Header'
export default {
  data() {
    return {
      back: this.$route.query.redirect,
      id: 2,
      // 假设消息格式是这种
      message: {
        readabled: 0, // 表示未读消息条数
        preview: [
          'https://ws1.sinaimg.cn/large/0069WcBigy1fnn5zfr5wsj302s02rglv.jpg','https://www.lovelivewiki.com/images/2/24/LL_kotorileft_filter.png'
        ],
        content: [{
          'id': '1',
          'message': '请问',
          'preview': 0
        }, {
          'id': '1',
          'message': '您今天要来点兔子吗?',
          'preview': 0
        }, {
          'id': '2',
          'message': '喵喵?',
          'preview': 1
        }, {
          'id': '2',
          'message': 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis aperiam dicta culpa optio illo aliquid vel nesciunt, asperiores modi saepe voluptate, iste, adipisci libero. Fugit omnis tempore temporibus iusto animi.',
          'preview': 1
        }]
      }
    }
  },
  components: {
    zhHeader
  }
}
</script>

<style lang="stylus">
.chat
  height: 100%
  >.header
    position: fixed
    height: 1.8rem
    width: 100%
    z-index: 100
    .submit
      display: inline-block
      height: 1.8rem
      line-height: 1.8rem
      background: orange
      margin-right: -0.4rem
      padding: 0 20px
  >.chat-container
    position: absolute
    top: 1.8rem
    bottom: 1.8rem
    width: 100%
    padding: 10px 6px
    overflow-y: scroll
    font-size: .48rem
    background: #fdfdfd
    &::-webkit-scrollbar
      width: 4px
      height: 100%
    &::-webkit-scrollbar-thumb
      border-radius: 4px
      background:rgba(0, 0, 0, 0.1)
    .item:not(:first-child)
      margin-top: 10px
    .preview
      width: 1.2rem
      height: 1.2rem
      border-radius: 100%
      &.left
        margin-right: 10px
      &.right
        margin-left: 10px
    .content
      position: relative
      padding: 10px 20px
      border-radius: 5px
      background: #f3f3f3
      max-width: calc(100% - 1.2rem - 20px - 10px)
      &.right
        background: #d7f4ff
      //气泡样式
      &::before
        display: inline-block
        position: absolute
        content: " "
        width: 16px
        height: 16px
        color: #f3f3f3
        border-width: 0
        border-bottom-width: 10px
        border-style: solid
        border-bottom-color: currentColor
      &.left::before
        top: -.16rem
        left: -6px
        border-radius: 0 0 0 14px
      &.right::before
        color: #d7f4ff
        top: -.16rem
        right: -6px
        border-radius: 0 0 14px 0
  >.control
    position: fixed
    display: flex
    bottom: 0
    width: 100%
    height: 1.8rem
    .input
      flex: 1
    .button
      display: inline-block
      position: relative
      width: 3rem
      line-height: 1.8rem
      text-align: center
      background: white
      font-size: 16px
      color: #3c8cff
      &::before
        position: absolute
        content: " "
        left: 0
        width: 100%
        height: 1px
        border-top: 1px solid #d9d9d9
        transform-origin: 0 0
</style>

